<template>
  <el-card class="box-card pr" :style="`height: ${height != 'auto' ? height + 'px':null};`">
        <template #header>
            <div class="card-header">
                <span>{{title}}</span>
                <!-- <el-button class="button" type="text">Operation button</el-button> -->
            </div>
        </template>
        <div class="card-body" :style="`padding: ${pbt}px ${pbr}px ${pbb}px ${pbl}px;`">
            <b style="font-size: 30px;">{{data}}</b>
        </div>
        <slot></slot>
    </el-card>
</template>

<script>
export default {
    props: {
        height: {type: String, default: 'auto'},
        title: {type: String, default: '卡片标题'},
        data: {type: Number, default: 0},
        pbt: {type: String, default: '20'},
        pbr: {type: String, default: '20'},
        pbb: {type: String, default: '20'},
        pbl: {type: String, default: '20'},
    },
    data(){
        return {

        }
    }
}
</script>

<style scoped>
.card-header{color: #aeaeae;}
</style>